<template>
  <div class="news-body">
    <!-- 搜索框 -->
    <el-card shadow="hover" class="search-body">
      <el-row :gutter="10">
        <el-col class="input-item" :span="6">
          <el-input v-model="search.title" placeholder="标题模糊查询"></el-input>
        </el-col>
        <el-col class="input-item" :span="4">
          <el-input v-model="search.author" placeholder="作者查询"></el-input>
        </el-col>
        <el-col :span="4" class="button-item">
          <el-button @click="dosearch" style="margin-left:20px" size="small" type="primary">搜索</el-button>
          <el-button @click="resetsearch" style="margin-left:20px" size="small">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 删除警告框 -->
    <el-dialog
      top="200px"
      width="30%"
      class="alert-dialog"
      :visible.sync="alertShow"
      title="警告"
      center
    >
      <span class="content">你确定要删除这个新闻吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="alertShow = false">取 消</el-button>
        <el-button type="primary" @click="delNews()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 文章细节内容 -->
    <detialVue ref="detialVue"/>
    <!-- 表格主体部分 -->
    <el-card class="news-main-body" v-loading="mainLoading">
      <el-button icon="el-icon-plus" @click='addORedit()' style="margin-bottom:10px" type="primary">新 增 文 章</el-button>
      <!--头部分页器 -->
      <div class="pagination-body">
        <el-pagination
          v-show="pager.limit>10"
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pager.start"
          :page-sizes="pager.pageSizes"
          :page-size="pager.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pager.total"
        ></el-pagination>
      </div>
      <el-table :data="newsList" border style="width: 100%">
        <el-table-column
          type="index"
          prop="date"
          label="序号"
          width="50"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column prop="title" label="文章标题" width="150" header-align="center" align="center"></el-table-column>
        <el-table-column prop="author" label="作者" width="120" header-align="center" align="center"></el-table-column>
        <el-table-column prop="desc" label="文章描述" width="280" header-align="center" align="center"></el-table-column>
        <el-table-column
          prop="addTime"
          label="上传时间"
          width="100"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column prop="cover" label="封面图" width="120" header-align="center" align="center">
          <template slot-scope="scope">
            <img class="news-main-body-image" :src="scope.row.cover" alt />
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="240"
          class="button-body"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <el-button @click='addORedit(scope.row.id)' type="primary" size="small">编辑</el-button>
            <el-button @click="showDetail(scope.row.id)" type="success" size="small">查看</el-button>
            <el-button @click="showAlert(scope.row.id)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-body">
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pager.start"
          :page-sizes="pager.pageSizes"
          :page-size="pager.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pager.total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import news from "@/api/newsManager/news";
import detialVue from "@/views/Manager/newsManager/component/newsDetail.vue";
export default {
  components: {
    detialVue
  },
  data() {
    return {
      // 同一个组件可以被很多路由注册。。。这不是废话吗，
      // 除了新增，其他的写完
      // 明天弄新增
      // 这两个结合，找一下组件先
      // 批量编辑，
      // fix定位效果怎么写
      // 试一下，如果绑定的输入框发生了v-show或者v-if的变化，但是，此时，输入框并没有输入内容
      // 没有内容会导致绑定的属性不会出现在search对象里
      // 是否会导致，绑定的属性无法设置set和get方法
      // 大坑，要总结
      search: {},
      // 分页器的设置
      pager: {
        start: 1,
        limit: 10,
        pageSizes: [10, 20, 30, 40],
        total: 0
      },
      //新闻列表
      newsList: [],
      //列表加载
      mainLoading: false,
      // 需要删除的id
      deleteId: "",
      // 警告框的显示隐藏
      alertShow: false
    };
  },
  methods: {
    // 新增、修改文章按钮，由于新增文章的页面过于繁琐，所以用其他单独的页面显示，通过路由跳转传值等。
    addORedit(id){
      console.log(id)
        this.$router.push({path:'/newsManager/news/update/:id',query:{id:id}})
    },
    // 控制文章细节组建的显示和隐藏
    showDetail(id){
        console.log(1)
        this.$refs.detialVue.isshow=true
        this.$refs.detialVue.showDetail(id)
    },
    //搜索方法
    dosearch() {
      this.getNewList();
    },
    //重置搜索框
    resetsearch() {
      // 所有数据为空的时候不执行这里的方法
      for (var i in this.search) {
        if (this.search[i]) {
          console.log(i);
          this.search = {};
          this.pager = this.$options.data().pager;
          this.getNewList();
          break;
        }
      }
    },
    //获取新闻列表/修改新闻内容
    getNewList() {
      this.mainLoading = true;
      // 以前我会这么写，将条件注入到请求对象中去
      //   var params = {
      //     start: this.pager.start,
      //     limit: this.pager.limit
      //   };
      //   for (var i in this.search) {
      //     if (this.search[i]) {
      //       params[i] = search[i];
      //     }
      //   }
      news
        .newsList({
          start: this.pager.start,
          limit: this.pager.limit,
          // 有了三点后，合并对象貌似变简单了
          ...this.search
        })
        .then(res => {
          this.mainLoading = false;
          this.newsList = res.data.data.list;
          this.pager.total = res.data.data.totalRow;
          console.log(res);
        })
        .catch(res => {
          this.mainLoading = false;
          this.$message({
            type: "error",
            message: "网络卡顿，请稍后重试"
          });
        });
    },
    // 打开警告框
    showAlert(id) {
      this.alertShow = true;
      this.deleteId = id;
    },
    // 删除文章的方法
    delNews() {
      this.alertShow = false;
      news.delNews({
          id: this.deleteId
        })
        .then(res => {
          this.getNewList();
          console.log(res);
          this.mainLoading = false;
          this.$message({
            type: "success",
            message: "删除成功"
          });
        })
        .catch(res => {
          this.mainLoading = false;
          this.$message({
            type: "error",
            message: "删除失败"
          });
          console.log(res);
        });
    },
    // 分页方法
    handleSizeChange(val) {
      this.pager.limit = val;
      this.pager.start = 1;
      this.getNewList();
    },
    handleCurrentChange(val) {
      this.pager.start = val;
      this.getNewList();
    }
  },
  created() {
    this.getNewList();
  }
};
</script>

<style lang="scss" scoped>
.news-main-body {
  margin: 10px;
  .news-main-body-image {
    width: 100px;
    height: 100px;
  }
}
.search-body {
  margin: 30px;
  .button-item {
    float: right;
  }
}
.pagination-body {
  overflow: hidden;
  .pagination {
    float: right;
  }
}
.alert-dialog {
  .content {
    width: 100%;
    text-align: center;
    display: inline-block;
  }
}
</style>